<template>
  <div>
    <Dialog :visible="visibleBistributeSet" width="50%" :title="visibleTitle" @confirm="confirm"
            @cancel="bistributeClose"
            @close="bistributeClose()">
      <el-form label-width="80px">
        <el-form-item :label="$t('信审')">
          <el-checkbox :true-label="1" :false-label="0" v-model="form.isNewProportion">{{ $t('新客自定义分单') }}</el-checkbox>
          <el-checkbox :true-label="1" :false-label="0" v-model="form.isOldProportion">{{ $t('老客自定义分单') }}</el-checkbox>
          <el-button type="text" icon="el-icon-edit" style="font-size: 16px;margin-left: 15px" @click="lookDetails">
            {{ $t('设置分单概率') }}
          </el-button>
        </el-form-item>
        <el-form-item :label="$t('催收')">
          <el-radio-group v-model="form.collectionType">
            <el-radio :label="0">{{ $t('按金额分单') }}</el-radio>
            <el-radio :label="1">{{ $t('按订单分单') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <Dialog append-body :visible.sync="customVisible" width="55%" @close="customPage = {}, activeValue = null"
              @confirm="probabilityConfirm"
              :footer="false"
              @cancel="customVisible = false" :title="customVisibleTitle">
        <el-form label-width="80px">
          <el-row :gutter="24">
            <el-col :span="8" :xs="24">
              <el-form-item :label="$t('员工姓名')">
                <el-input v-model="customPage.adminName"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item :label="$t('员工账号')">
                <el-input v-model="customPage.accountNumber"/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label-width="0px" style="text-align: right">
                <el-button type="primary" @click="getCreditReview">{{ $t('查询') }}</el-button>
                <el-button @click="resetSearch">{{ $t('重置') }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-alert
            style="margin-top: 15px"
            :title="$t('个体实际分单概率=列表中个体分单概率/ 集体分单概率值总和')"
            type="info"
            show-icon
            :closable="false">
        </el-alert>
        <Table style="margin-top: 10px" max-height='400' :table-column="tableColumn" :table-data="tableData"
               :page="false">
          <template slot-scope="{row}" slot="newProportion">
            <span v-if="activeValue !== row.id"> {{ row.newProportion }}</span>
            <el-input v-else style="width: 70px" oninput="value = value.replace(/[^\d.]/g, '')"
                      v-model="row.newProportion"></el-input>
          </template>
          <template slot-scope="{row}" slot="oldProportion">
            <span v-if="activeValue !== row.id">{{ row.oldProportion }}</span>
            <el-input v-else style="width: 70px" oninput="value = value.replace(/[^\d.]/g, '')"
                      v-model="row.oldProportion"></el-input>
          </template>
          <template slot-scope="{row}" slot="handle">
            <el-button v-if="activeValue !== row.id" type="text" @click="setProbabilityValue(row)">{{
                $t('设置分单概率')
              }}
            </el-button>
            <el-button v-else type="text" style="color: #409EFF" @click="saveProbabilityValue(row)">{{
                $t('保存')
              }}
            </el-button>
          </template>
        </Table>
      </Dialog>
    </Dialog>
  </div>
</template>

<script>
import {updateStatusProduct} from '@/api/product'
import {fetchCreditRate,updateCreditAudit} from '@/api/system'
export default {
  props: {
    visibleBistributeSet: Boolean,
    rows: Object
  },
  data() {
    return {
      form: {
        collectionType: null,
        isNewProportion: null,
        isOldProportion: null,
      },
      customVisible: false,
      tableColumn: [
        {label: this.$t('员工姓名'), prop: 'adminName',},
        {label: this.$t('员工账号'), prop: 'accountNumber',},
        {label: this.$t('新客分单概率'), slot: 'newProportion',},
        {label: this.$t('老客分单概率'), slot: 'oldProportion',},
        {label: this.$t('操作'), slot: 'handle',}
      ],
      tableData: [],
      customPage: {},
      activeValue: null,
    }
  },
  computed: {
    visibleTitle() {
      return this.rows.productName + ' - ' + this.$t('分单设置')
    },
    customVisibleTitle() {
      return this.rows.productName + ' - ' + this.$t('设置分单概率')
    },
  },
  watch: {
    visibleBistributeSet(val) {
      if (val) {
        this.form.collectionType = this.rows.collectionType
      }
    },
    rows: {
      handler(val) {
        if (val) {
          const {collectionType, isOldProportion, isNewProportion} = val
          this.form = {
            collectionType: collectionType || 0,
            isOldProportion: isOldProportion || 0,
            isNewProportion: isNewProportion || 0
          }
        }
      }
    }
  },
  methods: {
    async confirm() {
      const {adminProductId, productId,status} = this.rows
      const res = await updateStatusProduct({...this.form, adminProductId, productId,status})
      if (res.code === 1) {
        this.$message.success(this.$t('操作成功'))
        this.bistributeClose()
        this.$emit('confirm')
      }
    },
    lookDetails() {
      this.getCreditReview()
      this.customVisible = true
    },
    setProbabilityValue({id}) {
      this.activeValue = id
    },
    async saveProbabilityValue(row) {
      const {newProportion, oldProportion, id} = row
      if (newProportion !== "" && oldProportion !== "") {
        const newValue = parseFloat(newProportion)
        const oldValue = parseFloat(oldProportion)
        if (newValue >= 1 || oldValue >= 1) {
          return this.$message.error('请输入0-1之间的数值')
        }
      }
      const params = {}
      params.newProportion = parseFloat(newProportion)
      params.oldProportion = parseFloat(oldProportion)
      params.id = id
      const res = await updateCreditAudit(params)
      if (res.code === 1) {
        this.activeValue = null
        this.$message.success(this.$t('操作成功'))
        this.getCreditReview()
      }
    },
    resetSearch() {
      this.customPage = {}
      this.getCreditReview()
    },
    async getCreditReview() {
      const {adminUserId, productName} = this.rows
      const res = await fetchCreditRate({
        adminUserId, productName,
        ...this.customPage
      })
      if (res.code === 1) {
        this.tableData = res.data
      }
    },
    async probabilityConfirm() {
      const list = this.tableData.map(item => {
        item.newProportion = parseFloat(item.newProportion)
        item.oldProportion = parseFloat(item.oldProportion)
        return item
      })
      const res = await updateCreditAudit( list)
      if (res.code === 1) {
        this.customVisible = false
        this.$message.success(this.$t('操作成功'))
      }
    },
    bistributeClose() {
      this.$emit('update:visibleBistributeSet', false)
    },

  },
  beforeDestroy() {
    this.$emit('update:visibleBistributeSet', false)
  }
}
</script>

<style scoped>

</style>
